/*------------------------------------------------------------------------------------------------------------------------------------
Basisopbouw paginas
--------------------------------------------------------------------------------------------------------------------------------------*/

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}

.basis-html {
  background: lightgrey; 
}

.header {
  width: 100%;
  padding: 5px;
  padding-left: 25px;
  margin-bottom: 3px;
  background: #2F4F4F;
  color: white;
}

.main {
  margin-left:1%;
  width: 98%;
  padding: 5px;
}

.footer { 
  position:fixed;bottom:0;
  width: 100%;
  padding: 5px;
  background: #2F4F4F;
  color: white;
  text-align: center;
}

/*------------------------------------------------------------------------------------------------------------------------------------
Vermijd blauwe lijntjes rond gedrukte knoppen
--------------------------------------------------------------------------------------------------------------------------------------*/

*:focus {
  outline: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/*------------------------------------------------------------------------------------------------------------------------------------
Basisopbouw sections
--------------------------------------------------------------------------------------------------------------------------------------*/

section {
  border-radius: 10px;
	box-shadow: 5px 5px 10px black;
  border: 1px solid black;
  width: 49.2%;
  min-height: 380px;
  margin-left: 0.4%;
  margin-right: 0.4%;
  margin-top: 0px;
  margin-bottom: 10px;
  padding: 15px;
  padding-top: 15px;
  background:#008080;
  color: white;
  float: left;
}

#plaatje {
  display: none;
	text-align: center;
}

.sectionformheader {
  width: 99.2%;
  min-height: 0px;
  text-align: left;
  border: none;
  background: lightgrey;
}

.sectionfloatright {
  float: right;
}

.sectionfull {
  width: 99.2%;
  min-height: 0px;
}

.sectionsmall {
  width: 19.2%;
  min-height: 250px;
  float: left;
}

.bladerknoppen {
  border-radius: 0px;
	box-shadow: 0px 0px 0px;
  border: 0px ;
  width: 99.2%;
  min-height: 0px;
  background: none;
}

.sectionmiddle {
  margin-left: 15%;
  width: 70%;
  margin-right: 15%;
  min-height: 0px;
}

.sectionmiddle_wide {
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
  min-height: 0px;
}

.kassa {
  min-height: 0px;
}

.info {
  clear: both;
  min-height: 0px;
}

.kassarol {
  clear: both;
  min-height: 0px;
  background: white;
  color: black;
}

.kassaoverzicht {
  float: right;
  width: 685px;
  margin-top:  120px;
  min-height: 0px;
  background: white;
  color: black;
}

div.menu {
  float: left;
	width: 33.3%;
	text-align: center;
	margin-top: 20px;
}

div.sticker { 
  border-radius: 10px;
	box-shadow: 5px 5px 10px black;
  border: 1px solid black;
  width: 5.4cm;
  height: 2.5cm;
  float: left;
	text-align: center;
	padding-top: 0.4cm;
	margin-right: 20px;
	background: white;
	color: black;
}

/*------------------------------------------------------------------------------------------------------------------------------------
Tabellen
--------------------------------------------------------------------------------------------------------------------------------------*/

tr.streep td {																/*beetje ruimte en streep onder rows */
 	padding-top		:	6px;
 	padding-bottom:	6px;
 	border-bottom	:	1pt solid #009999;
}	

/*------------------------------------------------------------------------------------------------------------------------------------
Input labels
--------------------------------------------------------------------------------------------------------------------------------------*/

label {
  display: inline-block;
  width:140px;
  margin-left: 5px;
  text-align:right;
  padding-right: 10px;
}

label.antiek {
  font-size: 1.2em;
  text-shadow: 1px 1px 2px black, 0 0 5px black;
}

sublabel {
  display: inline-block;
  width: initial;
  margin: 0px;
  padding-left: 6px;
  padding-right: 6px;
  text-align: left;
}

/*------------------------------------------------------------------------------------------------------------------------------------
Input velden
--------------------------------------------------------------------------------------------------------------------------------------*/

input[type=text] , input[type=password] {
  border-radius: 5px;
	padding: 2px; 
	box-shadow: 5px 5px 10px black;
	font-size: 1.2em;
}

input[type=file] {
	box-shadow: 5px 5px 10px black;
	width: 300px;
  font-size: 1.0em;
  color: yellow;
	cursor: pointer;	
}

input[type=radio] {
  height: 15px;
  padding-top: 5px;
  cursor: crosshair;
}

input[type=date] , input[type=time] {
  border-radius: 5px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 2px; 
}	

::-webkit-clear-button, 
::-webkit-inner-spin-button {
  -webkit-appearance: none;
  display: none;
  }

::-webkit-calendar-picker-indicator { 
    background: none;
    color: red; 
  }

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
    color: transparent;
}

input:read-only {
  background-color: lightgrey;
  cursor: not-allowed;
}  

select {
  border-radius: 5px;
	box-shadow: 5px 5px 10px black;
	padding: 2px;
  background: #008080; 
  color: yellow;
  cursor: pointer;
}

textarea {
  border-radius: 5px;
	padding: 10px; 
	box-shadow: 5px 5px 10px black;
  background: #FFFFE0; 
	resize: vertical;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.0em;
  min-height: 140px;
	width: 100%;
}

.integer {
	text-align: right;
}

.capslock {
	text-transform: uppercase;
}

.decimal {
	text-align: right;
}

/*------------------------------------------------------------------------------------------------------------------------------------
Input button en submit
--------------------------------------------------------------------------------------------------------------------------------------*/

input[type=button], input[type=submit] {
  box-shadow: 3px 3px 6px black;  
  border-radius: 10px;
  height: 50px; 
  width: 90px;  
  font-size: 1.1em;
	background:#008080;
  border: 2px solid;  
  border-top-color: white;
  border-left-color: lightblue;
  border-right-color: #008080;
  border-bottom-color: #008080;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 5px black;
  margin-left:10px;
	padding: 5px; 
	cursor: pointer;
}

.buttonzoek , .buttonright , .buttonleft {
	float: right;
	margin-right: 10px;
	margin-bottom: 10px;
}

.buttonleft {
	float: left;
}

input[type=button].buttonklein {
	float: right;
	margin-right: 10px;
	margin-bottom: 10px;
  padding:  0px;
  height: 40px; 
  width: 60px;  
}

input[type=submit].opslaangroot {
  border-radius: 10px;
	margin-top: 10px;
  margin-left: 0.4%;
  margin-right: 0.4%;
  width: 99.2%;
  height: 200px;
	background: grey;
  border: 2px solid;  
  border-top-color: white;
  border-left-color: lightblue;
  border-right-color: grey;
  border-bottom-color: grey;
  font-size: 2.5em;
}

input[type=button].buttonmenu , input[type=submit].buttonmenu {
  width: 200px;
  margin-bottom: 20px;
}

/*------------------------------------------------------------------------------------------------------------------------------------
Plaatjes
--------------------------------------------------------------------------------------------------------------------------------------*/

img.invoergroot {
	box-shadow: 5px 5px 10px black;
}

img.invoer {
  margin-left: 5px;
	margin-bottom: 5px; 
	width: 85px;
	height: 55px;
  box-shadow: 3px 3px 6px black;  
}

img.kassa {
  border-radius: 13px;
  box-shadow: 5px 5px 10px black;  
  margin-left: 50px;
	margin-bottom: 20px;
	clear: both;
	float: left;
}

img.kassaklein {
  box-shadow: 3px 3px 6px black;  
  margin-left: 8px;
	margin-bottom: 8px; 
	width: 85px;
	height: 55px;
	float: right;
}

img.artikel {
	box-shadow: 5px 5px 10px black;
	float: right;
	height: 180px;
}

img.wwmidden {
  border-radius: 10px 10px 10px 10px;
 	box-shadow: 5px 5px 10px black;
	border: 1px solid black;
	width: 75%;
	max-width: 400px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

/*------------------------------------------------------------------------------------------------------------------------------------
Zoekscherm
--------------------------------------------------------------------------------------------------------------------------------------*/

.sectionzoekheader {
  width: 99.2%;
  min-height: 0px;
  text-align: left;
  border: none;
  color: white;
}

#zoekNaam {
	font-size: 1.2em;
  color: yellow;
  text-shadow: 1px 1px 1px black, 0 0 1px black;
}

div.record {
  display: table;
  border-radius: 10px; 
 	box-shadow: 1px 1px 3px black;
  width: 49.2%;
  margin-left: 0.4%;
  margin-right: 0.4%;
  margin-bottom: 4px;
  float: left;
  background: #C0C0C0; 
}

div.recordblader {
  display: table;
  width: 49.2%;
  margin-left: 0.4%; 
  margin-right: 0.4%;
  margin-bottom: 4px;
  float: right;
}

span.record1 , span.record2 {
  display: table-cell;
  width: 65%;
  vertical-align: middle;
  padding: 2px;
  color: white;
}

span.record2 {
  width: 35%;
}

#recordbutton {
  border-radius: 10px;
	background: lightgrey;
  border-top-color: white;
  border-left-color: lightblue;
  border-right-color: lightgrey;
  border-bottom-color: lightgrey;
	width: 60px;
	height: 40px;
  margin: 0px;
	margin-right: 10px;
	padding: 0px;
	color: black;
  text-shadow: none;
	float: right;
 	cursor: pointer;
}

#bladerknop {
	margin-right: 10px;	
	margin-left: 10px;	
	float: right;
 	cursor: pointer;
}

/*------------------------------------------------------------------------------------------------------------------------------------
Tekstopmaak
--------------------------------------------------------------------------------------------------------------------------------------*/

h1 , h2 , h3 {
  margin-top: 0px;
  margin-bottom: 20px;
  font-size:1.5em;
  color: white;
  text-shadow: 1px 1px 1px black, 0 0 1px black;
}

h2 {
  margin-top: 20px;
  font-size:1.2em;
}

h3 {
  margin-top: 0px;
  margin-bottom: 5px;
  font-size: 1.2em;
  color: yellow;
}

h3.onlinewinkel {
 	color: yellow;
	text-shadow: 2px 2px black;
	font-style: italic;
}

#formheader , #omsheader , #kassaheader {
  margin: 0px;
  margin-left: 20px;
  margin-right: 20px;
	font-size: 1.4em;
  color: white;
  text-shadow: 1px 1px 1px black, 0 0 1px black;
}

#kassaheader {
  color: yellow;
	font-size: 2.0em;
	font-weight: bold;
}

#omsheader {
  margin-left: 10px;
  color: yellow;
  text-shadow: none;
  font-size: 1.0em;
  font-weight:  bold;
}

#fouttekst {
  clear: both;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 30px;
	color: red;
}

#kassabon , #kassaeuro {
  display: inline-block;
  margin-top: 35px;
  text-align: left;
	font-size: 1.2em;
	float: left;
}

#kassaeuro {
  margin-left: 20px;
  margin-right: 10px;
}




/*------------------------------------------------------------------------------------------------------------------------------------
Kassa
--------------------------------------------------------------------------------------------------------------------------------------*/

.headerregel , .kassaregel{
	float:left;
}

.headerregel {
  border-radius: 5px;
  border:1px solid black;
  box-shadow: 3px 3px 3px black;
  margin-bottom:10px;
  background: lightgrey;
	padding:8px;
  text-align: center;
}

.numboard , .numboardtot {
  border-radius: 10px;
	box-shadow: 5px 5px 10px black;
  border: 2px solid black;
  background:#707070;
  border-top-color: white;
  border-left-color: lightblue;
  border-right-color: #707070;
  border-bottom-color: #707070;
  position: fixed;
  right: 1.8%;
  top: 133px;
  padding:1%;
  text-align:left;
  color:white;
}

.numboardtot {
  background: #CD5C5C;
  border-right-color: #CD5C5C;
  border-bottom-color: #CD5C5C;
}

input.venster {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 20%;
  margin-right: 20%;
  width: 60%;
  height: 40px;
  border-radius: 10px;
  font-size: 1.5em;
  text-align: right;
  background: black;
  color: #86FF0D;
  }

button.menu {
  box-shadow: 3px 3px 6px black;  
  border-radius: 10px;
  height: 50px; 
  width: 200px;  
  font-size: 1.1em;
	background:#008080;
  border: 2px solid;  
  border-top-color: white;
  border-left-color: lightblue;
  border-right-color: #008080;
  border-bottom-color: #008080;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 5px black;
  margin-bottom:10px;
	cursor: pointer;	
}

button.kassa ,
button.optie ,
button.clear , 
button.mail ,
button.cents ,
button.enter {
  border-radius: 5px;
  background:#E9E9E9;
  box-shadow: 3px 3px 10px black;
  border: 2px solid;  
  border-top-color: white;
  border-left-color: lightblue;
  border-right-color: #E9E9E9;
  border-bottom-color: #E9E9E9;
  width:65px;
  height:65px;
  font-size: 1.1em;
  margin:5px;
  color:black;
  text-shadow: 0px 0px 0px;
 	cursor: pointer;
}

input[type=submit].verwerk , 
input[type=submit].verwerkok , 
button.wissen , 
button.ok ,
button.kleineknop , 
button.optie ,
button.rest,
button.afvoer {
  border-radius: 10px;
  box-shadow: 3px 3px 6px black;
  border: 2px solid;  
  border-top-color: white;
  border-left-color: lightblue;
  width:65px;
  height:65px;
  font-size: 1.1em;
  margin:5px;
  background: #008080;
  border-right-color: #008080;
  border-bottom-color: #008080;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 5px black;
 	cursor: pointer;
}

input[type=submit].excelknop ,
input[type=button].excelknop {
  border-radius: 5px;
  box-shadow: 3px 3px 6px black;
  border: 2px solid;  
  border-top-color: white;
  border-left-color: lightblue;
  width:50px;
  height:20px;
  font-size: 0.9em;
  padding:0px;
  margin:1px;
  background: #008080;
  border-right-color: #008080;
  border-bottom-color: #008080;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 5px black;
 	cursor: pointer;
}

input[type=submit].verwerkok {
  background: #32CD32;
  border-right-color: #32CD32;
  border-bottom-color: #32CD32;
}

input[type=submit].wissen {
  border-radius: 10px;
  box-shadow: 3px 3px 6px black;  
  background: red;
  border-right-color: red;
  border-bottom-color: red;
	margin: 0px;
	margin-bottom: 10px;
  padding: 0px;
  width: 30px;
  height: 30px;
 	cursor: pointer;
}

input[type=submit].ok {
  border-radius: 2px;
  box-shadow: 3px 3px 6px black;  
  background: #33cc33;
  border-right-color: #33cc33;
  border-bottom-color: #33cc33;
	margin: 3px;
  padding: 0px;
  width: 40px;
  height: 20px;
 	cursor: pointer;
}

button.kleineknop {
  border-radius: 5px;
  box-shadow: 3px 3px 6px black;  
	margin: 0px;
  padding: 0px;
  width: 60px;
  height: 30px;
  float: right;
  font-size: 1.0em;
 	cursor: pointer;
}

button.rest {
  border-radius: 10px;
  box-shadow: 3px 3px 6px black;  
	margin-left: 5px;
  padding: 0px;
  width: 70px;
  height: 30px;
  font-size: 1.0em;
 	cursor: pointer;
}

button.afvoer {
  border-radius: 10px;
  box-shadow: 3px 3px 6px black;  
	margin: 5px;
  padding: 0px;
  width: 60px;
  height: 30px;
  background: red;
  color: white;
  font-size: 1.0em;
 	cursor: pointer;
}

button.clear {
  background:red;
  border-right-color: red;
  border-bottom-color: red;
  color:white;
  text-shadow: 1px 1px 2px black, 0 0 0px black;
 	cursor: pointer;
}

button.mail {
  border-radius: 5px;
  box-shadow: 3px 3px 6px black;  
  background: #008080;
  border-right-color: #008080;
  border-bottom-color: #008080;
  width: 60px;
  height: 30px;
  color:white;
  text-shadow: 1px 1px 2px black, 0 0 0px black;
 	cursor: pointer;
}

button.cents {
  background: lightblue;
  border-right-color: lightblue;
  border-bottom-color: lightblue;
  visibility: hidden;
 	cursor: pointer;
}

button.enter {
  width: 142px;
 	cursor: pointer;
}